<template>
	<view class="quan">
		<!-- 头部 -->
		<view class="top">
			<image src="/static/beijing.png" class="top_bj_img" />
			<view class="top_nav">
				<view class="top_left" @click="hui">
				</view> 
			</view>
		</view>
		<!-- 申请登录浮动框 -->
		<view class="float">
				<form @submit="formSubmit" @reset="formReset">
					<view class="register_top">
						<view class="register_register" @tap="login_q(2)">找回密码</view>
					</view>
					<view class="register_tel"><image src="/static/tel.png" class="img"><input type="number" maxlength="11" name="tel" @input="login_tel" placeholder="请输入手机号码" /></view>
					<view class="register_yzm"><image src="/static/yzm.png" class="img"><input class="yzm" type="text" name="yzm" placeholder="请输入验证码" />
					<view v-if="show_yzm">
						<view class="yzm_btn" @tap="yzm">获取验证码</view>
					</view>
					<view v-else>
						<view class="yzm_btn2">剩余{{seconde}}s</view>
					</view>
					</view>
					<view class="register_pass"><image src="/static/mm.png" class="img"><input class="password" type="text" name="password" :password="look" placeholder="请输入您的密码" /><view class="look_btn" @tap="register_see"><image class="yan" :src="yan"/></view></view>
					<view class="register_pass"><image src="/static/mm.png" class="img"><input class="password" type="text" name="password2" :password="look" placeholder="请确认您的密码" /><view class="look_btn" @tap="register_see"><image class="yan" :src="yan"/></view></view>
					<view class="btn"><button type="primary" form-type="submit">提交</button></view>
				</form>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: 1,
				look: true,
				see: true,
				tel:'',
				yhxx:'',
				show_yzm:true,
				seconde:'60',
				yan:'/static/yan2.png'
			}
		},
		methods: {
			hui: function() {
				console.log("点击")
				uni.navigateTo({
					url: "../login/login"
				})
			},
			register_see: function() {
				this.look = !this.look
				if(this.look==false){
				this.yan='/static/yan.png'
				}else{
					this.yan='/static/yan2.png'
				}
			},
			formSubmit: function(e) {
				console.log(e.detail.value)
				this.yhxx=e.detail.value
				var content=this.yhxx
				uni.request({
						url:'http://tuiguang.yiyunoto.com/api/login/findpwd',
						method:'POST',
						headers:{'Content-Type':'application/json'},
						data:{phone:content.tel,
								code:content.yzm,
								repwd:content.password2,
								pwd:content.password
						},
						success: (res) => {
						console.log("登录成功",res)
						uni.showToast({
							title:res.data.msg
						})
						if(res.data.msg=="找回密码成功"){
							uni.navigateTo({
								url:'../login/login'
							})
						}
						console.log(res.data.data);
						},
						fail:(res)=>{
							console.log("登录失败",res)
						}
					});
			},
			formReset: function(e) {
			                console.log('清空数据')
			            },
			login_tel:function(e){
				this.tel=e.detail.value
			},
			
			yzm:function(){
				console.log("获取验证码",this.tel)
					const requestTask =uni.request({
							url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
							method:'POST',
							data:{
								phone:this.tel,
							},
							success: (res) => {
								this.$api.msg(res.data.msg);
								if(res.data.msg=="短信验证码发送成功"){
								this.show_yzm=false,
								setInterval(()=>{
									--this.seconde
								},1000)
								setTimeout(()=>{
									this.show_yzm=true,
									this.seconde=60},
									60000
								)}
							console.log("ya",res.data.msg)							// console.log(res.data.data);
							}
						});
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 400upx;
	}

	.top_bj_img {
		width: 100%;
		height: 100%;
		border-radius:0upx 0upx 100upx 100upx ;
	}

	.top_nav {
		width: 100%;
		height: 100upx;
		position: absolute;
		top: 20upx;
		padding-left: 20upx;
		box-sizing: border-box;
	}

	.top_left {
		magin: 20upx;

		float: left;
	}

	.top_center {
		text-align: center;
		color: #FFFFFF;
	}

	.float {
		width: 90%;
		box-shadow: 0upx 10upx 10upx #0C0800;
		border-radius: 10upx;
		margin-left: 5%;
		padding-bottom: 50upx;
		position: relative;
		top: -200upx;
		background: #FFFFFF;
	}

	/* 登录项浮动框 */
	.login_top {
		width: 90%;
		height: 180upx;
		margin: 0 auto;
	}
	.register {
		width: 30%;
		padding-bottom: 30upx;
		margin: 30upx 50upx;
		text-align: center;
		float: left;
	}
.img{
		width:50upx;
		height: 50upx;
		border-radius: 25upx;
		position: absolute;
		left: 70upx;
		float: left;
	}
	.login_tel {
		width: 80%;
		height: 100upx;
		padding: 100upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	/* 注册项浮动框 */
	.register_top {
		width: 80%;
		height: 80upx;
		margin: 0 auto;
	}
	.register_register {
		width: 80%;
		padding-bottom: 30upx;
		margin: 30upx 50upx;
		color:#007AFF;
		text-align: center;
		float: left;
	}

	.register_tel {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}
	.register_yzm {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	.yzm {
		width: 60%;
		float: left;
	}

	.yzm_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: blue;

	}
	.yzm_btn2{
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: #DBDADA;
	}
	.register_pass {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	.password {
		width: 70%;
		float: left;
	}
	
	.look_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
	}
	.yan{
		width: 60upx;
		height: 40upx;
	}
	.btn {
		width: 80%;
		margin: 50upx auto;
	}

	
</style>
